<!-- 新增/编辑/查看 项目订单-->
<template>
  <div>
    <el-tabs v-model="tabview" type="card" class="demo-tabs">
      <el-tab-pane label="项目订单详情" name="A">
        <el-form
          v-if="state == 'add' || state == 'edit'"
          class="addProjectOrder"
        >
          <el-card shadow="never" style="margin-top: 1%">
            <template #header>
              <div style="display: flex; justify-content: space-between">
                <div class="card-header">
                  <div
                    style="
                      width: 4px;
                      height: 20px;
                      background-color: #409eff;
                      margin-right: 5px;
                    "
                  />
                  <span>基本信息</span>
                </div>
                <div>
                  <el-button
                    v-if="state == 'add'"
                    type="primary"
                    color="#1E3485"
                    @click="rulesSubmit(ruleFormRef)"
                    >保存并提交</el-button
                  >
                  <el-button
                    v-if="state == 'add' || state == 'edit'"
                    type="primary"
                    color="#1E3485"
                    @click="rules(ruleFormRef)"
                    >保存</el-button
                  >
                  <closeTagButton id="closeTagButtonRef" />
                </div>
              </div>
            </template>
            <el-form
              ref="ruleFormRef"
              :model="form"
              label-width="150px"
              :rules="rulesForStepOne"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="销售合同"
                    style="width: 100%"
                    prop="contractName"
                  >
                    <el-select
                      v-model="form.contractName"
                      placeholder="请选择 销售合同"
                      clearable
                      @click="showSalescontract"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="订单编号"
                    style="width: 100%"
                    prop="orderSn"
                  >
                    <el-input
                      v-model="form.orderSn"
                      placeholder="请输入 订单编号"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="订单名称"
                    style="width: 100%"
                    prop="orderName"
                  >
                    <el-input
                      v-model="form.orderName"
                      placeholder="请输入 订单名称"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="计划收货时间"
                    style="width: 100%"
                    prop="receivingTime"
                  >
                    <el-date-picker
                      v-model="form.receivingTime"
                      type="date"
                      placeholder="请选择 计划收货时间"
                      style="width: 100%"
                      value-format="YYYY-MM-DD"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="价格类型"
                    style="width: 100%"
                    prop="priceType"
                  >
                    <el-radio-group
                      v-model="form.priceType"
                      disabled
                      class="ml-4"
                    >
                      <el-radio value="0">锁定</el-radio>
                      <el-radio value="1">浮动</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    v-if="form.priceType === '0'"
                    label="支付说明"
                    style="width: 100%"
                  >
                    <el-input
                      v-model="form.priceTypeMark"
                      :rows="1"
                      type="textarea"
                      placeholder="请输入 支付说明"
                      disabled
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    v-if="form.priceType === '1'"
                    label="支付说明"
                    style="width: 100%"
                    prop="priceTypeMark"
                  >
                    <el-input
                      v-model="form.priceTypeMark"
                      :rows="1"
                      type="textarea"
                      placeholder="请输入 支付说明"
                      disabled
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <div v-if="form.priceType === '1'">
                <el-row>
                  <el-col :span="8">
                    <el-form-item
                      label="基准价"
                      style="width: 100%"
                      prop="basePrice"
                    >
                      <el-input
                        v-model="form.basePrice"
                        placeholder="请输入 基准价"
                        clearable
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="涨幅"
                      style="width: 100%"
                      prop="increasePrice"
                    >
                      <el-input
                        v-model="form.increasePrice"
                        placeholder="请输入 涨幅"
                        clearable
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="涨幅比率"
                      style="width: 100%"
                      prop="increaseRate"
                    >
                      <el-input
                        v-model="form.increaseRate"
                        placeholder="请输入 涨幅比率"
                        clearable
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item
                      label="当天铜价"
                      style="width: 100%"
                      prop="copperPrice"
                    >
                      <el-input
                        v-model="form.copperPrice"
                        placeholder="请输入 当天铜价"
                        clearable
                        @input="updatetable()"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="铜价日期"
                      style="width: 100%"
                      prop="copperDate"
                    >
                      <el-date-picker
                        v-model="form.copperDate"
                        type="date"
                        placeholder="请选择 铜价日期"
                        style="width: 100%"
                        value-format="YYYY-MM-DD"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="修改人" style="width: 100%">
                      <el-input
                        v-model="form.copperUpdatePersonName"
                        placeholder="请输入 修改人"
                        clearable
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" style="width: 100%">
                    <el-input
                      v-model="form.orderDesc"
                      :rows="1"
                      type="textarea"
                      placeholder="请输入 备注"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="项目部附件" style="width: 100%" required>
                    <el-upload
                      v-model:file-list="form.attachFiles"
                      class="upload-demo"
                      :action="uploadUrl"
                      :headers="headers"
                      multiple
                      :on-preview="handlePreview"
                      :on-success="handleSuccess"
                      :before-remove="beforeRemove"
                      style="width: 60%"
                    >
                      <el-button :icon="Upload" color="#1E3485">
                        点击上传</el-button
                      >
                      <template #tip>
                        <div class="el-upload__tip">
                          (注：请预览下载采购单，盖章上传)
                        </div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <el-card shadow="never" style="margin-top: 1%">
            <template #header>
              <div style="display: flex; justify-content: space-between">
                <div class="card-header">
                  <div
                    style="
                      width: 4px;
                      height: 20px;
                      background-color: #409eff;
                      margin-right: 5px;
                    "
                  />
                  <span>申请材料</span>
                  <div style="margin-left: 20px">
                    <el-button
                      type="primary"
                      color="#1E3485"
                      @click="showMaterial"
                      >添加</el-button
                    >
                  </div>
                  <div class="header-span">
                    <div class="item">
                      <div
                        class="container"
                        style="
                          background: rgb(67, 94, 194);
                          color: rgb(255, 255, 255);
                        "
                      >
                        蓝色底色
                      </div>
                      <span>复制的材料</span>
                    </div>
                    <div class="item">
                      <div
                        class="container"
                        style="
                          background: rgb(245, 108, 108);
                          color: rgb(255, 255, 255);
                        "
                      >
                        红色底色
                      </div>
                      <span>订购数量大于合同量</span>
                    </div>
                    <div class="item">
                      <!-- <span
                          >提示：双击已订购数量，可查看当前材料的历史下单记录</span
                        > -->
                    </div>
                  </div>
                </div>
                <div>
                  <el-button
                    type="primary"
                    color="#1E3485"
                    @click="openViewForPurchase()"
                    >预览/下载</el-button
                  >
                </div>
              </div>
            </template>
            <el-form label-width="150px">
              <vxe-table
                ref="tableRefCL"
                border
                min-height="300"
                header-align="center"
                :column-config="{ resizable: true }"
                :row-config="{ isHover: true }"
                :data="materiaTableData"
                :row-style="rowStyle"
                size="mini"
              >
                <vxe-column type="checkbox" width="60" align="center" />
                <vxe-column
                  type="seq"
                  title="序号"
                  :formatter="seqFormatter"
                  width="60"
                  align="center"
                />
                <vxe-column field="" title="" width="60">
                  <template v-slot:default="{ row, rowIndex }">
                    <vxe-button
                      v-if="row.isCopy == 0"
                      type="text"
                      style="font-size: 20px"
                      @click="tableadd(row, rowIndex)"
                      >+</vxe-button
                    >
                  </template>
                </vxe-column>
                <vxe-column field="materialCode" title="材料编码" width="120" />
                <vxe-column field="materialName" title="材料名称" width="120" />
                <vxe-column
                  field="materialSpecs"
                  title="规格"
                  width="200"
                  show-overflow
                />
                <vxe-column field="materialModel" title="型号" width="120" />
                <vxe-column field="materialUnit" title="单位" width="120">
                  <template v-slot:default="{ row }">
                    <vxe-input v-model="row.materialUnit" type="text" />
                  </template>
                </vxe-column>
                <vxe-column field="materialBrand" title="品牌" width="120" />
                <vxe-column
                  field="materialNum"
                  title="合同数量"
                  fixed="right"
                  width="80"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="checkNum"
                  title="验收数量"
                  fixed="right"
                  width="80"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="applyCountNum"
                  title="已订购数量"
                  fixed="right"
                  width="80"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="orderCount"
                  title="本次下单数量"
                  fixed="right"
                  width="110"
                  show-overflow="ellipsis"
                >
                  <template v-slot:default="{ row }">
                    <vxe-input
                      v-model="row.orderCount"
                      type="number"
                      min="0"
                      @blur="updatestyle(row)"
                    />
                  </template>
                </vxe-column>
                <vxe-column
                  field="includingTaxUnitPrice"
                  title="合同含税单价(元)"
                  fixed="right"
                  width="120"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="contractIncludingTaxPrice"
                  title="本次含税单价(元)"
                  fixed="right"
                  width="120"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="tax"
                  title="税率(%)"
                  fixed="right"
                  width="80"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="includingTaxTotalPrice"
                  title="含税总金额(元)"
                  fixed="right"
                  width="110"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="materialMark"
                  title="备注"
                  fixed="right"
                  width="80"
                  show-overflow="ellipsis"
                >
                  <template v-slot:default="{ row }">
                    <vxe-input v-model="row.materialMark" type="text" />
                  </template>
                </vxe-column>
                <vxe-column
                  title="操作"
                  fixed="right"
                  width="200"
                  align="center"
                >
                  <!-- 操作列按钮 -->
                  <template #default="{ row }">
                    <vxe-button mode="text" @click="materialDelete(row)"
                      >删除</vxe-button
                    >
                  </template>
                </vxe-column>
              </vxe-table>
            </el-form>
          </el-card>
          <el-card shadow="never" style="margin-top: 1%">
            <template #header>
              <div style="display: flex; justify-content: space-between">
                <div class="card-header">
                  <div
                    style="
                      width: 4px;
                      height: 20px;
                      background-color: #409eff;
                      margin-right: 5px;
                    "
                  />
                  <span>收货人</span>
                  <div style="margin-left: 20px">
                    <!-- <el-button
                        type="primary"
                        color="#1E3485"
                        style="display: none"
                        @click="showaddPersonnel"
                        >添加</el-button
                      > -->
                  </div>
                </div>
              </div>
            </template>
            <el-form label-width="150px">
              <vxe-table
                ref="tableRef"
                border
                :data="consigneeTableData"
                size="mini"
              >
                <!-- <vxe-column type="checkbox" fixed="left" width="60" /> -->
                <vxe-column field="consigneeName" title="姓名" fixed="left" />
                <vxe-column
                  field="consigneePhone"
                  title="手机号"
                  fixed="left"
                />
                <!-- <vxe-column
                  field=""
                  title="操作"
                  fixed="right"
                  width="200"
                  align="center"
                >
                  <template #default="{ row }">
                    <vxe-button mode="text" @click="PersonnelDelete(row)"
                      >删除</vxe-button
                    >
                  </template>
                </vxe-column> -->
              </vxe-table>
            </el-form>
          </el-card>
        </el-form>
        <el-form v-if="state == 'view'" class="viewProjectOrder">
          <el-card shadow="never" style="margin-top: 1%">
            <template #header>
              <div style="display: flex; justify-content: space-between">
                <div class="card-header">
                  <div
                    style="
                      width: 4px;
                      height: 20px;
                      background-color: #409eff;
                      margin-right: 5px;
                    "
                  />
                  <span>基本信息</span>
                </div>
                <div><closeTagButton id="closeTagButtonRef" /></div>
              </div>
            </template>
            <el-form :model="form" label-width="150px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="销售合同" style="width: 100%">
                    <el-select
                      v-model="form.contractName"
                      placeholder=""
                      disabled
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="订单编号" style="width: 100%">
                    <el-input
                      v-model="form.orderSn"
                      placeholder=""
                      disabled
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="订单名称" style="width: 100%">
                    <el-input
                      v-model="form.orderName"
                      placeholder=""
                      disabled
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="计划收货时间" style="width: 100%">
                    <el-date-picker
                      v-model="form.receivingTime"
                      type="date"
                      placeholder=""
                      disabled
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="价格类型" style="width: 100%">
                    <el-radio-group
                      v-model="form.priceType"
                      disabled
                      class="ml-4"
                    >
                      <el-radio value="0">锁定</el-radio>
                      <el-radio value="1">浮动</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="支付说明" style="width: 100%">
                    <el-input
                      v-model="form.priceTypeMark"
                      :rows="3"
                      type="textarea"
                      placeholder="请输入 支付说明"
                      disabled
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <div v-if="form.priceType == '1'">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="基准价" style="width: 100%">
                      <el-input
                        v-model="form.basePrice"
                        placeholder="请输入 基准价"
                        disabled
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="涨幅" style="width: 100%">
                      <el-input
                        v-model="form.increasePrice"
                        placeholder="请输入 涨幅"
                        disabled
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="涨幅比率" style="width: 100%">
                      <el-input
                        v-model="form.increaseRate"
                        placeholder="请输入 涨幅比率"
                        disabled
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="当天铜价" style="width: 100%">
                      <el-input
                        v-model="form.copperPrice"
                        placeholder="请输入 当天铜价"
                        disabled
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="铜价日期" style="width: 100%">
                      <el-date-picker
                        v-model="form.copperDate"
                        type="date"
                        placeholder="请选择 铜价日期"
                        style="width: 100%"
                        value-format="YYYY-MM-DD"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="修改人" style="width: 100%">
                      <el-input
                        v-model="form.copperUpdatePersonName"
                        placeholder="请输入 修改人"
                        disabled
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" style="width: 100%">
                    <el-input
                      v-model="form.orderDesc"
                      :rows="1"
                      type="textarea"
                      placeholder=""
                      disabled
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="项目部附件" style="width: 100%">
                    <el-upload
                      v-model:file-list="form.attachFiles"
                      class="upload-demo"
                      :action="uploadUrl"
                      :headers="headers"
                      multiple
                      :on-preview="handlePreview"
                      :on-success="handleSuccess"
                      :before-remove="beforeRemove"
                      style="width: 60%"
                    >
                      <el-button :icon="Upload" color="#1E3485" disabled>
                        点击上传</el-button
                      >
                      <template #tip>
                        <div class="el-upload__tip">
                          (注：请预览下载采购单，盖章上传)
                        </div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <el-card shadow="never" style="margin-top: 1%">
            <template #header>
              <div style="display: flex; justify-content: space-between">
                <div class="card-header">
                  <div
                    style="
                      width: 4px;
                      height: 20px;
                      background-color: #409eff;
                      margin-right: 5px;
                    "
                  />
                  <span>申请材料</span>
                  <div class="header-span">
                    <div class="item">
                      <div
                        class="container"
                        style="
                          background: rgb(67, 94, 194);
                          color: rgb(255, 255, 255);
                        "
                      >
                        蓝色底色
                      </div>
                      <span>复制的材料</span>
                    </div>
                    <div class="item">
                      <div
                        class="container"
                        style="
                          background: rgb(245, 108, 108);
                          color: rgb(255, 255, 255);
                        "
                      >
                        红色底色
                      </div>
                      <span>订购数量大于合同量</span>
                    </div>
                    <div class="item">
                      <!-- <span
                          >提示：双击已订购数量，可查看当前材料的历史下单记录</span
                        > -->
                    </div>
                  </div>
                </div>
                <div>
                  <el-button
                    type="primary"
                    color="#1E3485"
                    @click="openViewForPurchase()"
                    >预览/下载</el-button
                  >
                </div>
              </div>
            </template>
            <el-form label-width="150px">
              <vxe-table
                border
                show-footer
                min-height="300"
                header-align="center"
                :column-config="{ resizable: true }"
                :row-config="{ isHover: true }"
                :data="materiaTableData"
                size="mini"
                :row-style="rowStyle"
                :footer-data="materialTableFooterData"
                @cell-click="handleRowClick"
              >
                <vxe-column type="checkbox" width="60" align="center" />
                <vxe-column type="seq" title="序号" width="60" align="center" />
                <vxe-column field="materialCode" title="材料编码" width="120" />
                <vxe-column field="materialName" title="材料名称" width="120" />
                <vxe-column
                  field="materialSpecs"
                  title="规格"
                  width="200"
                  show-overflow
                />
                <vxe-column field="materialModel" title="型号" width="120" />
                <vxe-column field="materialUnit" title="单位" width="120" />
                <vxe-column field="materialBrand" title="品牌" width="120" />
                <vxe-column
                  field="materialNum"
                  title="合同数量"
                  fixed="right"
                  width="100"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="checkNum"
                  title="验收数量"
                  fixed="right"
                  width="100"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="applyCountNum"
                  title="已订购数量"
                  fixed="right"
                  width="100"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="orderCount"
                  title="本次下单数量"
                  fixed="right"
                  width="100"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="includingTaxUnitPrice"
                  title="合同含税单价(元)"
                  fixed="right"
                  width="120"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="contractIncludingTaxPrice"
                  title="本次含税单价(元)"
                  fixed="right"
                  width="120"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="tax"
                  title="税率(%)"
                  fixed="right"
                  width="80"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="includingTaxTotalPrice"
                  title="含税总金额(元)"
                  fixed="right"
                  width="110"
                  show-overflow="ellipsis"
                />
                <vxe-column
                  field="materialMark"
                  title="备注"
                  fixed="right"
                  width="110"
                  show-overflow="ellipsis"
                />
              </vxe-table>
            </el-form>
          </el-card>
          <el-card shadow="never" style="margin-top: 1%">
            <template #header>
              <div style="display: flex; justify-content: space-between">
                <div class="card-header">
                  <div
                    style="
                      width: 4px;
                      height: 20px;
                      background-color: #409eff;
                      margin-right: 5px;
                    "
                  />
                  <span>收货人</span>
                </div>
              </div>
            </template>
            <el-form label-width="150px">
              <vxe-table
                ref="tableRef"
                border
                :data="consigneeTableData"
                size="mini"
              >
                <!-- <vxe-column type="checkbox" fixed="left" width="60" /> -->
                <vxe-column field="consigneeName" title="姓名" fixed="left" />
                <vxe-column
                  field="consigneePhone"
                  title="手机号"
                  fixed="left"
                />
              </vxe-table>
            </el-form>
          </el-card>
          <el-card
            v-if="form.supplyStatus == 5"
            shadow="never"
            style="margin-top: 1%"
          >
            <template #header>
              <div style="display: flex; justify-content: space-between">
                <div class="card-header">
                  <div
                    style="
                      width: 4px;
                      height: 20px;
                      background-color: #409eff;
                      margin-right: 5px;
                    "
                  />
                  <span>云采确认记录</span>
                </div>
              </div>
            </template>
            <el-form label-width="150px">
              <vxe-table ref="tableRef" border :data="Confirmationrecord">
                <vxe-column field="status" title="状态" width="100" />
                <vxe-column field="cnName" title="确认人" width="400" />
                <vxe-column field="createdAt" title="确认时间" width="400" />
                <vxe-column field="mark" title="确认说明" />
                <vxe-column field="file" title="附件" />
              </vxe-table>
            </el-form>
          </el-card>
        </el-form>
        <div>
          <addPersonnel :visible="dialogVisible" @close="closeaddPersonnel" />
          <SelectSalescontract
            :visible="dialogVisiblesales"
            @close="closeSalescontract"
          />
          <SelectMaterial
            :materiaTableData="materiaTableData"
            :contractId="form.contractId"
            :visible="dialogVisibleMaterial"
            @close="closeMaterial"
            @confirm="confirmMaterial"
          />
          <OrderRecord
            :contractId="form.contractId"
            :visible="dialogVisibleOrderRecord"
            @close="closeOrderRecord"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="审批记录" name="B"
        ><div>
          <el-card shadow="never" style="margin-top: 1%">
            <template #header>审批记录</template>
            <div class="examine">
              <img src="@/assets/img/ProjectOrderExamine.jpg" alt="" />
            </div>
            <vxe-table
              border
              header-align="center"
              :column-config="{ resizable: true }"
              :row-config="{ isHover: true }"
              :data="examineTableData"
              size="mini"
              style="margin-top: 1%"
            >
              <vxe-column type="seq" width="60" title="序号" align="center" />
              <vxe-column
                v-for="column in examineTableColumns"
                :key="column.field"
                :field="column.field"
                :title="column.title"
                :min-width="column.width"
                align="center"
                show-overflow
              >
                <template v-slot:default="{ row }">
                  {{ row[column.field] }}
                </template>
              </vxe-column>
            </vxe-table>
          </el-card>
        </div></el-tab-pane
      >
    </el-tabs>
    <!-- 弹窗组件 -->
    <div class="dialogs">
      <filePreview
        :visible="filePreviewVisible"
        :fileId="fileId"
        :fileType="fileType"
        :contractId="form.contractId"
        @close="closeFilePreview"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { Upload } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { VxeTableInstance, VxePagerEvents, VxeTablePropTypes } from "vxe-table";
import type { FormInstance, FormRules, UploadFile } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import addPersonnel from "./dialog/addPersonnel.vue";
import SelectSalescontract from "./dialog/SelectSalescontract.vue";
import SelectMaterial from "./dialog/SelectMaterial.vue";
import OrderRecord from "./dialog/OrderRecord.vue";
import { useRoute } from "vue-router";
import {
  getprojectOrderinfo,
  getmateriallist,
  getmaterialstatistics,
  getconsigneelist,
  projectOrdersaveOrUpdate,
  deletematerial,
  deleteconsignee,
  postsubmitapproval,
  historylist,
  getOrderSnAndName
} from "@/api/ERP_OrderManage";
import { getNodePayFormData, getProjectReceiver } from "@/api/ERP_sales";
import { headers, uploadUrl, getDictDetail } from "@/api/utils";
import closeTagButton from "@/components/closeTagButton.vue";
import { getAuditHistoryTaskList } from "@/api/ERP_public";
import filePreview from "@/components/filePreview2.vue";

// 路由跳转
const route = useRoute();

const ruleFormRef = ref<FormInstance>();
// 表单数据
const form = reactive({
  attachFiles: [],
  attachFiless: "", // 上传文件
  auditStatus: "",
  auditStatusName: "",
  basePrice: "",
  contractId: "",
  contractMethod: "",
  contractName: "",
  contractNo: "",
  copperCoefficient: "",
  copperDate: "",
  copperPrice: "",
  copperUpdatePersonId: "",
  copperUpdatePersonName: "",
  createDept: "",
  createdAt: "",
  createdBy: "",
  deploymentId: "",
  flowSubmitDate: "",
  id: "",
  increasePrice: "",
  increaseRate: "",
  isDeleted: "",
  modelSchemeInfoId: "",
  notaxTotalPrice: "",
  orderDesc: "",
  orderName: "",
  orderNum: "",
  orderProcess: "",
  orderSn: "",
  orderStatus: "",
  priceType: "",
  priceTypeMark: "",
  processInstanceId: "",
  processVersion: "",
  projectConfirmFile: "",
  projectDeptId: "",
  projectDeptName: "",
  projectFolwableStatus: "",
  projectFolwableStatusName: "",
  projectId: "",
  projectInvoiceStatus: "",
  projectName: "",
  projectReconciliationStatus: "",
  purchaseContractId: "",
  purchaseContractName: "",
  purchaseContractTaxTotalPrice: "",
  purchaseDeptId: "",
  purchaseDeptName: "",
  receivingTime: "",
  saleDeptId: "",
  saleDeptName: "",
  settlementStatus: "",
  shipmentAt: "",
  shipmentAttachs: "",
  shipmentDesc: "",
  shipmentFiles: "",
  shipmentUserId: "",
  shipmentUserName: "",
  status: "",
  statusName: "",
  supplierId: "",
  supplierName: "",
  supplierReconciliationStatus: "",
  supplyConfirmDate: "",
  supplyConfirmFile: "",
  supplyInvoiceStatus: "",
  supplyStatus: 0,
  supplyStatusName: "",
  takeAt: "",
  takeAttachs: "",
  takeDesc: "",
  takeFiles: "",
  takeUserId: "",
  takeUserName: "",
  taxTotalPrice: "",
  tenantId: "",
  updatedAt: "",
  updatedBy: ""
});

const tabview = ref("A");

onMounted(() => {
  if (state.value == "view" || state.value == "edit") {
    getinfo();
  } else if (state.value == "add") {
    form.priceType = "0";
  }
});

// 获取项目订单详情
const getinfo = async () => {
  if (form.id != "") {
    route.query.id = form.id;
  }
  const all = await getprojectOrderinfo({ id: route.query.id }).then(
    (response: any) => {
      form.id = response.data.id;
      form.contractName = response.data.contractName;
      form.contractId = response.data.contractId;
      form.contractMethod = response.data.contractMethod;
      form.orderSn = response.data.orderSn;
      form.orderName = response.data.orderName;
      form.receivingTime = response.data.receivingTime;
      form.priceType = response.data.priceType;
      form.priceTypeMark = response.data.priceTypeMark;
      form.orderDesc = response.data.orderDesc;
      // form.attachFiles = response.data.attachFiles;
      form.basePrice = response.data.basePrice;
      form.increasePrice = response.data.increasePrice;
      form.increaseRate = response.data.increaseRate;
      form.copperPrice = response.data.copperPrice;
      form.copperDate = response.data.copperDate;
      form.copperUpdatePersonName = response.data.copperUpdatePersonName;
      form.processInstanceId = response.data.processInstanceId;
      if (response.data.attachFiles) {
        form.attachFiles = [];
        form.attachFiless = response.data.attachFiles;
        JSON.parse(response.data.attachFiles).forEach(file => {
          form.attachFiles.push({
            name: file.fileOriginName,
            url: file.fileUrl
          });
        });
      }
      // 获取订单列表
      let params: any = {};
      params.pageIndex = 1;
      params.pageSize = 999;
      params.id = form.id;
      getmateriallist(params).then((response: any) => {
        if (response.data) {
          materiaTableData.value = response.data.records.map(item => {
            return {
              ...item,
              oldOrderCount: item.orderCount
            };
          });
          if (state.value == "view") {
            // 获取材料列表统计数据
            getmaterialstatistics({
              id: form.id
            }).then((response: any) => {
              if (response.data) {
                materialTableFooterData.value = [];
                materialTableFooterData.value.push({
                  includingTaxTotalPrice: response.data.includingTaxTotalPrice,
                  orderCount: response.data.orderCount,
                  materialNum: response.data.contractCount
                });
              }
            });
          }
        }
      });
      // 获取订单列表
      getconsigneelist(params).then((response: any) => {
        if (response.data) {
          consigneeTableData.value = response.data.records;
        }
      });
      // 获取订单列表
      let paramsB: any = {};
      paramsB.bizId = form.id;
      paramsB.type = 0;
      // 获取供应商确认
      historylist(paramsB).then((response: any) => {
        if (response.data) {
          if (response.file) {
            const jsonObject = JSON.parse(response.file);
            jsonObject.forEach(item => {
              response.file = item.name;
            });
          }
          if (response.createdAt) {
            const date = new Date(response.createdAt);
            response.createdAt =
              date.getFullYear() +
              "-" +
              (date.getMonth() + 1) +
              "-" +
              date.getDate();
          }
          if (response.status == "0") {
            response.status = "";
          } else if (response.status == "1") {
            response.status = "";
          } else if (response.status == "2") {
            response.status = "";
          } else if (response.status == "3") {
            response.status = "通过";
          }
          Confirmationrecord.value = response.data.records;
        }
      });
      getExamineTableData();
    }
  );
};

// 页面状态
const state = ref<string | string[]>(route.query.action);

//表单校验
const rulesForStepOne = reactive<FormRules>({
  contractName: [
    { required: true, message: "请选择销售合同", trigger: "blur" }
  ],
  orderSn: [{ required: true, message: "请输入订单编号", trigger: "blur" }],
  orderName: [{ required: true, message: "请输入订单名称", trigger: "blur" }],
  receivingTime: [
    { required: true, message: "请选择计划收货时间", trigger: "blur" }
  ],
  priceType: [{ required: true, message: "请选择价格类型", trigger: "blur" }],
  priceTypeMark: [
    {
      required: true,
      message: "请输入支付说明",
      trigger: "blur"
    }
  ],
  basePrice: [{ required: true, message: "请输入基准价", trigger: "blur" }],
  increasePrice: [{ required: true, message: "请输入涨幅", trigger: "blur" }],
  increaseRate: [
    { required: true, message: "请输入涨幅比率", trigger: "blur" }
  ],
  copperPrice: [{ required: true, message: "请输入当天铜价", trigger: "blur" }],
  copperDate: [{ required: true, message: "请选择铜价日期", trigger: "blur" }]
});

// 表格数据
const materiaTableData = ref([]);
const consigneeTableData = ref([]);
const Confirmationrecord = ref([]);
let materialTableFooterData = ref<VxeTablePropTypes.FooterData>([]);
// 表格分页配置
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});

// 表格分页事件
const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
};

//弹窗打开
let dialogVisible = ref(false);
function showaddPersonnel() {
  dialogVisible.value = true;
}
function closeaddPersonnel(val: any) {
  if (val == false) {
    dialogVisible.value = false;
  } else {
    let Personnel = {
      consigneeName: val.Name,
      consigneePhone: val.Phone
    };
    consigneeTableData.value.push(Personnel);
    dialogVisible.value = false;
  }
}

let dialogVisiblesales = ref(false);
function showSalescontract() {
  dialogVisiblesales.value = true;
}
function closeSalescontract(val: any) {
  if (val == false) {
    dialogVisiblesales.value = false;
  } else {
    form.contractId = val.value.id;
    form.contractName = val.value.contractName;
    if (val.value.priceType == "锁定") {
      form.priceType = "0";
    } else if (val.value.priceType == "浮动") {
      form.priceType = "1";
      contractinfo(val.value.id);
    }
    dialogVisiblesales.value = false;
    materiaTableData.value = [];
    // 带出订单编号、订单名称
    getOrderSnName(val.value.id);
    // 带出收货人
    Bring(val.value.id);
  }
}
async function getOrderSnName(id: any) {
  let params: any = {};
  params.contractId = id;
  const response: any = await getOrderSnAndName(params);
  if (response.code === 200 && response.data) {
    form.orderSn = response.data.orderSn;
    form.orderName = response.data.orderName;
  }
}
async function Bring(contractId?: any) {
  let params: any = {};
  params.contractId = contractId;
  const response: any = await getProjectReceiver(params);
  if (response.code === 200) {
    consigneeTableData.value = response.data.map(item => ({
      consigneeName: item.name,
      consigneePhone: item.phone
    }));
  }
}

let dialogVisibleOrderRecord = ref(false);
function showOrderRecord() {
  dialogVisibleOrderRecord.value = true;
}
function closeOrderRecord(val: any) {
  if (val == false) {
    dialogVisibleOrderRecord.value = false;
  } else {
    dialogVisibleOrderRecord.value = false;
  }
}

async function contractinfo(id: any) {
  let params: any = {};
  params.pageIndex = 1;
  params.pageSize = 10;
  params.contractId = id;
  const response: any = await getNodePayFormData(params);
  if (response.code === 200 && response.data) {
    form.basePrice = response.data.basePrice;
    form.increasePrice = response.data.increasePrice;
    form.increaseRate = response.data.increaseRate;
    form.copperPrice = response.data.copperPrice;
    form.copperDate = response.data.copperDate;
    form.copperUpdatePersonName = "超级管理员";
    form.priceTypeMark = response.data.priceTypeMark;
  }
}

let dialogVisibleMaterial = ref(false);
function showMaterial() {
  if (form.contractName == "") {
    ElMessage("请先选择销售合同");
  } else {
    dialogVisibleMaterial.value = true;
  }
}
function closeMaterial(val: any) {
  dialogVisibleMaterial.value = false;
}
const confirmMaterial = async val => {
  for (let i in val.value) {
    const record = {
      contractMaterialId: val.value[i].id,
      //materialBindId: val.value[i].id, // 用于去重判断，没有其他用途
      materialId: val.value[i].materialId,
      materialSortNum: val.value[i].materialSortNum,
      materialCode: val.value[i].materialCode,
      materialName: val.value[i].materialName,
      materialSpecs: val.value[i].materialSpecs,
      materialModel: val.value[i].materialModel,
      materialUnit: val.value[i].materialUnit,
      materialBrand: val.value[i].materialBrand,
      materialNum: val.value[i].materialNum,
      checkNum: val.value[i].checkNum,
      applyCountNum: val.value[i].applyCountNum,
      orderCount: val.value[i].materialNum,
      contractIncludingTaxPrice: val.value[i].includingTaxUnitPrice,
      includingTaxUnitPrice: val.value[i].includingTaxUnitPrice,
      tax: val.value[i].tax,
      includingTaxTotalPrice: val.value[i].includingTaxTotalPrice,
      materialMark: val.value[i].materialMark,
      // oldOrderCount:
      //   val.value[i].orderCount == undefined ? 0 : val.value[i].orderCount,
      isCopy: 0
    };
    materiaTableData.value.push(record);
  }
  materiaTableData.value.sort((a, b) => a.materialSortNum - b.materialSortNum);
  dialogVisibleMaterial.value = false;
  updatetable();
  tabupdate();
};

//上传
const fileList = ref<UploadUserFile[]>([]);
const contractFileList: any = [];
const filePreviewDialogVisible = ref(false);
const fileUrl = ref("");

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile: UploadFile) => {
  if (uploadFile.response) {
    const response = uploadFile.response as unknown as any;
    window.open(response.data.url, "_blank");
  } else {
    window.open(uploadFile.url, "_blank");
  }
};

// 文件上传成功,传参赋值，格式修改
const handleSuccess = (fileList: any) => {
  contractFileList.push(fileList.data);
  const formatterObj = [];
  for (let i in contractFileList) {
    let tempvalue: any = {};
    tempvalue.fileUrl = contractFileList[i].url;
    tempvalue.fileSuffix =
      "." +
      contractFileList[i].name.substring(
        contractFileList[i].name.lastIndexOf(".") + 1
      );
    tempvalue.fileOriginName = contractFileList[i].name;
    formatterObj.push(tempvalue);
  }
  form.attachFiless = JSON.stringify(formatterObj);
};
// 非新增不许删除
const beforeRemove = (uploadFile, uploadFiles) => {
  if (state.value !== 'add') {
    ElMessage.error("当前状态文件不可删除");
    return false;
  }
};
//保存
const rules = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      saveORupdate();
    } else {
      console.log("error submit!", fields);
    }
  });
};
//保存并提交
const rulesSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      Submit();
    } else {
      console.log("error submit!", fields);
    }
  });
};
//保存/编辑事件
const saveORupdate = async () => {
  if (form.attachFiless == "") {
    ElMessage.error("请上传项目部附件");
    return;
  }
  if (route.query.action == "add") {
    let data: any = {};
    data.id = form.id;
    data.orderSn = form.orderSn;
    data.orderName = form.orderName;
    data.attachFiles = form.attachFiless;
    data.receivingTime = form.receivingTime;
    data.priceType = form.priceType;
    data.priceTypeMark = form.priceTypeMark;
    data.contractId = form.contractId;
    data.orderDesc = form.orderDesc;
    data.materialList = materiaTableData.value;
    data.consigneeList = consigneeTableData.value;
    data.basePrice = form.basePrice;
    data.increasePrice = form.increasePrice;
    data.increaseRate = form.increaseRate;
    data.copperPrice = form.copperPrice;
    data.copperDate = form.copperDate;
    data.copperUpdatePersonName = form.copperUpdatePersonName;
    data.contractMethod = 0;
    const all = await projectOrdersaveOrUpdate(data).then((response: any) => {
      if (response.code == 200) {
        document.getElementById("closeTagButtonRef").click();
        ElMessage({
          message: "保存成功",
          type: "success"
        });
      } else {
        ElMessage.error(response.msg);
      }
    });
  } else if (route.query.action == "edit") {
    let data: any = {};
    data.id = form.id;
    data.orderSn = form.orderSn;
    data.orderName = form.orderName;
    data.attachFiles = form.attachFiless;
    data.receivingTime = form.receivingTime;
    data.priceType = form.priceType;
    data.priceTypeMark = form.priceTypeMark;
    data.contractId = form.contractId;
    data.orderDesc = form.orderDesc;
    data.materialList = materiaTableData.value;
    data.consigneeList = consigneeTableData.value;
    data.basePrice = form.basePrice;
    data.increasePrice = form.increasePrice;
    data.increaseRate = form.increaseRate;
    data.copperPrice = form.copperPrice;
    data.copperDate = form.copperDate;
    data.copperUpdatePersonName = form.copperUpdatePersonName;
    data.contractMethod = 0;
    const all = await projectOrdersaveOrUpdate(data).then((response: any) => {
      if (response.code == 200) {
        document.getElementById("closeTagButtonRef").click();
        ElMessage({
          message: "保存成功",
          type: "success"
        });
      } else {
        ElMessage.error(response.msg);
      }
    });
  }
};

//表格颜色
// const cellClassName: VxeTablePropTypes.CellClassName<RowVO> = ({
//   row,
//   column
// }) => {
//   return "row-red";
// };

///材料删除
const materialDelete = async (row: any) => {
  if (row.id == "" || !row.id) {
    for (let key in materiaTableData.value) {
      if (materiaTableData.value[key].materialId == row.materialId) {
        materiaTableData.value.splice(parseFloat(key), 1);
      }
    }
  } else {
    const response = await deletematerial({ id: row.id }).then(
      (response: any) => {
        if (response.code == 200) {
          ElMessage({
            message: "删除成功",
            type: "success"
          });
          getinfo();
          setTimeout(function () {
            for (let key in materiaTableData.value) {
              if ((materiaTableData.value[key].materialId = row.materialId)) {
                materiaTableData.value[key].isCopy = 0;
                return tabupdate(materiaTableData.value[key]);
              }
            }
          }, 3000);
        }
      }
    );
  }
};
const PersonnelDelete = async (row: any) => {
  if (row.id == "" || !row.id) {
    for (let key in consigneeTableData.value) {
      if (consigneeTableData.value[key].consigneeName == row.consigneeName) {
        consigneeTableData.value.splice(parseFloat(key), 1);
      }
    }
  } else {
    const all = await deleteconsignee({ id: row.id }).then((response: any) => {
      if (response.code == 200) {
        ElMessage({
          message: "删除成功",
          type: "success"
        });
        getinfo();
      }
    });
  }
};

//提交审批
async function Submit() {
  if (form.attachFiless == "") {
    ElMessage.error("请上传项目部附件");
    return;
  }
  ElMessageBox.confirm("是否提交审批？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      Submitsave();
    })
    .catch(() => {
      ElMessage.info("取消提交！");
    });
}
async function Submitsave() {
  let data: any = {};
  data.id = form.id;
  data.orderSn = form.orderSn;
  data.orderName = form.orderName;
  data.attachFiles = form.attachFiless;
  data.receivingTime = form.receivingTime;
  data.priceType = form.priceType;
  data.priceTypeMark = form.priceTypeMark;
  data.contractId = form.contractId;
  data.orderDesc = form.orderDesc;
  data.materialList = materiaTableData.value;
  data.consigneeList = consigneeTableData.value;
  data.basePrice = form.basePrice;
  data.increasePrice = form.increasePrice;
  data.increaseRate = form.increaseRate;
  data.copperPrice = form.copperPrice;
  data.copperDate = form.copperDate;
  data.copperUpdatePersonName = form.copperUpdatePersonName;
  data.contractMethod = 0;
  const all = await projectOrdersaveOrUpdate(data).then((response: any) => {
    if (response.code == 200) {
      let param: any = {};
      param.id = response.data;
      postsubmitapproval(param).then((response: any) => {
        if (response.code == 200) {
          document.getElementById("closeTagButtonRef").click();
          ElMessage({
            message: "提交成功",
            type: "success"
          });
        }
      });
    } else {
      ElMessage.error(response.msg);
    }
  });
}

const paymentTableData = ref();
const tableRefFK = ref<VxeTableInstance>();
interface RowVO {}
//增加付款节点
const insertEvent = async (row?: RowVO | number) => {
  const $table = tableRefFK.value;
  if ($table) {
    const record = {};
    const { row: newRow } = await $table.insertAt(record, row);
    await $table.setEditCell(newRow, "name");
  }
};

//单元格样式
const rowStyle = ({ row, rowIndex }) => {
  if (row && row.orderCount) {
    let applyCountNum = Number(
      row.applyCountNum == undefined ? 0 : row.applyCountNum
    );
    let orderCount = Number(row.orderCount == undefined ? 0 : row.orderCount);
    let materialNum = Number(
      row.materialNum == undefined ? 0 : row.materialNum
    );
    let sum = 0;
    for (let i in materiaTableData.value) {
      if (materiaTableData.value[i].materialCode === row.materialCode) {
        sum += Number(materiaTableData.value[i].orderCount);
      }
    }
    if (applyCountNum + sum > materialNum) {
      if (row.isCopy == 0) {
        return {
          backgroundColor: "#f56c6c",
          color: "#ffffff"
        };
      }
    }
  }
  if (row && row.materialCode) {
    const tbas = materiaTableData.value.map(item => item.materialCode);
    const tbaCount = tbas.filter(
      materialCode => materialCode === row.materialCode
    ).length;
    if (tbaCount > 1) {
      if (row.isCopy == 1) {
        return { backgroundColor: "#435ec2", color: "#ffffff" };
      }
    }
  }
};
const tableRefCL = ref<VxeTableInstance>();
const tableadd = async (row, index) => {
  if (row) {
    const record = {
      contractMaterialId: row.contractMaterialId,
      materialId: row.materialId,
      materialSortNum: row.materialSortNum,
      materialCode: row.materialCode,
      materialName: row.materialName,
      materialSpecs: row.materialSpecs,
      materialModel: row.materialModel,
      materialUnit: row.materialUnit,
      materialBrand: row.materialBrand,
      materialNum: row.materialNum,
      checkNum: row.checkNum,
      applyCountNum: row.applyCountNum,
      orderCount: "0",
      contractIncludingTaxPrice: row.contractIncludingTaxPrice,
      includingTaxUnitPrice: row.includingTaxUnitPrice,
      tax: row.tax,
      includingTaxTotalPrice: row.includingTaxTotalPrice,
      materialMark: row.materialMark,
      oldOrderCount: "",
      isCopy: 1
    };
    materiaTableData.value.splice(index + 1, 0, record);
    rowStyle(row);
    tabupdate();
  }
};
const seqFormatter = ({ $rowIndex }) => $rowIndex + 1;

// 预览弹窗
let filePreviewVisible = ref(false);
let fileId = ref("");
let fileType = ref("");
// 材料表格预览
function openViewForPurchase() {
  if (materiaTableData.value.length === 0) {
    return ElMessage.error("请先添加订单材料！");
  }
  if (form.id == "") {
    fileId.value = route.query.id as string;
  } else {
    fileId.value = form.id;
  }
  fileType.value = "projectOrder";
  filePreviewVisible.value = true;
}
function closeFilePreview(val: boolean) {
  filePreviewVisible.value = val;
}

async function tabupdate(row?: any) {
  if (form.id == "") {
    let data: any = {};
    data.orderSn = form.orderSn;
    data.orderName = form.orderName;
    data.attachFiles = form.attachFiless;
    data.receivingTime = form.receivingTime;
    data.priceType = form.priceType;
    data.priceTypeMark = form.priceTypeMark;
    data.contractId = form.contractId;
    data.orderDesc = form.orderDesc;
    data.materialList = materiaTableData.value;
    data.consigneeList = consigneeTableData.value;
    data.basePrice = form.basePrice;
    data.increasePrice = form.increasePrice;
    data.increaseRate = form.increaseRate;
    data.copperPrice = form.copperPrice;
    data.copperDate = form.copperDate;
    data.copperUpdatePersonName = form.copperUpdatePersonName;
    data.contractMethod = 0;
    const all = await projectOrdersaveOrUpdate(data).then((response: any) => {
      if (response.code == 200) {
        form.id = response.data;
        getinfo();
        rowStyle(row);
      } else {
        ElMessage.error(response.msg);
      }
    });
  } else {
    let data: any = {};
    data.id = form.id;
    data.orderSn = form.orderSn;
    data.orderName = form.orderName;
    data.attachFiles = form.attachFiless;
    data.receivingTime = form.receivingTime;
    data.priceType = form.priceType;
    data.priceTypeMark = form.priceTypeMark;
    data.contractId = form.contractId;
    data.orderDesc = form.orderDesc;
    data.materialList = materiaTableData.value;
    data.consigneeList = consigneeTableData.value;
    data.basePrice = form.basePrice;
    data.increasePrice = form.increasePrice;
    data.increaseRate = form.increaseRate;
    data.copperPrice = form.copperPrice;
    data.copperDate = form.copperDate;
    data.copperUpdatePersonName = form.copperUpdatePersonName;
    data.contractMethod = 0;
    const all = await projectOrdersaveOrUpdate(data).then((response: any) => {
      if (response.code == 200) {
        getinfo();
        rowStyle(row);
      } else {
        ElMessage.error(response.msg);
      }
    });
  }
}
///////////////////// 审批记录 /////////////////////
let examineTableData = ref([]);
const examineTableColumns = reactive([
  {
    field: "actName",
    title: "流程节点",
    width: 100
  },
  {
    field: "auditDate",
    title: "审批时间",
    width: 100
  },
  {
    field: "auditUserName",
    title: "审批人",
    width: 100
  },
  {
    field: "auditResultMsg",
    title: "审批结果",
    width: 100
  },
  {
    field: "auditMessage",
    title: "审批意见",
    width: 100
  }
]);
// 获取审批记录
async function getExamineTableData() {
  if (!form.processInstanceId) return;
  let params: any = {};
  params.processInstanceId = form.processInstanceId;
  try {
    const response: any = await getAuditHistoryTaskList(params);
    if (response.code === 200) {
      examineTableData.value = response.data;
    }
  } catch (error) {
  } finally {
  }
}

function updatestyle(row) {
  rowStyle(row);
  if (!form.copperPrice) {
    row.includingTaxTotalPrice = toFixed(
      Number(row.orderCount) * Number(row.includingTaxUnitPrice),
      5
    );
  } else {
    row.includingTaxTotalPrice = toFixed(
      Number(row.orderCount) * Number(row.contractIncludingTaxPrice),
      5
    );
  }
  tabupdate();
}

function handleRowClick({ row, column, cell, event }) {
  if (event.column.field == "applyCountNum") {
    //showOrderRecord();
  }
}

function toFixed(num, fixed) {
  return Number(num).toFixed(fixed);
}
const updatetable = () => {
  if (form.copperPrice > form.basePrice) {
    if (materiaTableData.value.length > 0) {
      for (let i in materiaTableData.value) {
        materiaTableData.value[i].contractIncludingTaxPrice = toFixed(
          ((Math.floor(
            (Number(form.copperPrice) - Number(form.basePrice)) /
              Number(form.increasePrice)
          ) *
            Number(form.increaseRate)) /
            100) *
            materiaTableData.value[i].includingTaxUnitPrice +
            materiaTableData.value[i].includingTaxUnitPrice,
          5
        );
      }
    }
  } else if (form.copperPrice < form.basePrice) {
    if (materiaTableData.value.length > 0) {
      for (let i in materiaTableData.value) {
        materiaTableData.value[i].contractIncludingTaxPrice = toFixed(
          materiaTableData.value[i].includingTaxUnitPrice -
            (materiaTableData.value[i].includingTaxUnitPrice *
              Math.floor(
                (Number(form.basePrice) - Number(form.copperPrice)) /
                  Number(form.increasePrice)
              ) *
              Number(form.increaseRate)) /
              100,
          5
        );
      }
    }
  } else if (form.copperPrice == form.basePrice) {
    if (materiaTableData.value.length > 0) {
      for (let i in materiaTableData.value) {
        materiaTableData.value[i].contractIncludingTaxPrice =
          materiaTableData.value[i].includingTaxUnitPrice;
      }
    }
  }
  // TODO 增加机制：如果材料表格中有数据，参与计算 - 含税总金额（元）
};
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
}
.header-span {
  display: flex;
  align-items: center;
}
.item {
  display: flex;
  align-items: center;
  margin-left: 20px;
  font-size: 12px;
}
.container {
  height: 20px;
  width: 80px;
  text-align: center;
  border: 1px solid #eee;
  line-height: 20px;
  font-size: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
.examine {
  display: grid;
  place-items: center;
  img {
    height: 15vh;
  }
}
::v-deep(.mytable-style.vxe-table .vxe-body--row.row-red) {
  background-color: #187;
  color: #fff;
}
</style>
